import echarts from 'echarts'

var gradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
  {
    offset: 0,
    color: '#E4C01D'
  },
  {
    offset: 0.333,
    color: '#639556'
  },
  {
    offset: 0.666,
    color: '#136D78'
  },
  {
    offset: 1,
    color: '#082B3D'
  },
])



export function optFromData(name, value) {

  if (value > 1) { value = 1 }

  let percentage = (value * 100).toFixed(2)
  let tick = []

  for (let i = 0; i < 100; i++) {
    let itemStyle = {
      color: '#033653'
    }

    if (i < percentage * 1) {
      itemStyle.color = '#02E2E4'
    }

    tick.push({
      value: 1,
      name: i,
      itemStyle: itemStyle
    })
  }

  let opt = {
    color: [gradient],
    title: [
      {
        text: percentage + '%',
        x: 'center',
        y: '40%',
        textStyle: {
          fontSize: 32,
          fontWeight: 100,
          color: '#fff',
          textAlign: 'center',
        }
      },
      {
        text: name,
        x: 'center',
        y: '55%',
        textStyle: {
          fontSize: 16,
          fontWeight: 100,
          color: 'rgba(255, 255, 255, 0.5)',
          textAlign: 'center',
        }
      },

    ],
    angleAxis: {
      max: 30,
      show: false
    },
    radiusAxis: {
      show: false,
      type: "category",
      data: ['a', 'b', 'c'],
    },
    polar: {
      radius: ['50%', '65%']
    },
    tooltip: {
      // trigger: 'item'
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        name: 'a',
        type: 'bar',
        coordinateSystem: 'polar',
        barWidth: 5,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [0, 0, 600]
      },
      {
        // hoverAnimation: false,
        type: 'pie',
        data: tick,
        radius: ['68%', '80%'],
        itemStyle: {
          borderColor: 'rgba(0, 0, 0, 1)',
          borderWidth: 4
        },
        label: {
          normal: {
            position: 'inside',
            show: false
          }
        }
      }
    ]
  }


  return opt;

}

